<template>
  <div>
    <!-- 如果当前路由有子节点 -->
    <el-submenu
      v-if="routeObj.children && routeObj.children.length > 0"
      :index="routeObj.path">
      <template slot="title">
        <i :class="routeObj.meta.icon"></i>
        <span slot="title">{{routeObj.name}}</span>
      </template>
      <!-- 递归调用自身 -->
      <leftMenuItem
        v-for="(item, index) in routeObj.children"
        :key="index"
        :routeObj="item">
      </leftMenuItem>
    </el-submenu>
    <!-- 当前节点不含子节点 -->
    <el-menu-item 
      v-if="(!routeObj.children || routeObj.children.length == 0)" 
      v-show="routeObj.meta.isMenu"
      :index="routeObj.path">
        <i :class="routeObj.meta.icon"></i>
        <span slot="title">{{routeObj.name}}</span>
    </el-menu-item>
  </div>
</template>

<script>
import leftMenuItem from './leftMenuItem'
export default {
  name:"leftMenuItem",
  components:{leftMenuItem},
  props:{
    routeObj:{
      type:Object,
      default:()=>{return {}}
    },
    collapse:{
      type:Boolean,
      default:()=>{return true}
    }
  },
  mounted(){
  }
}
</script>

<style>

</style>